
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import TextField from './RowField/TextField';
import NumberField from './RowField/NumberField';
import SelectField from './RowField/SelectField';
import DateField from './RowField/DateField';
import RangeField from './RowField/RangeField';
import RefComField from './RowField/RefComField';
import RenderCell from './RenderCell';
import ToolTip from 'bee-tooltip';
import {ts2Formatter,toThousands} from 'utils';

const propTypes = {
    onChange:PropTypes.func,
    filedProps:PropTypes.object,//filed属性
}

const defaultProps = {
    onChange:()=>{},
    filedProps:{}
}

class RenderColumn extends Component {

    constructor(props){
        super(props);
        this.state={
            data:props.data
        }
    }

    /**
     * 千分符
     * @param {要转换的数据} num 
     */
    // toThousands(value){
    //     if(value == 0) return value;
    //     var reg=String(value).indexOf('.') >-1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g;//千分符的正则
    //     let StringValue = String(value).replace(reg, '$1,')
    //     return StringValue;
    // }

    getValue=(value)=>{
        let { renderType,filedProps } = this.props;
        let { options=[],defaultValue } = filedProps;
        value = defaultValue!=undefined?defaultValue:value;
        if(renderType&&(renderType=='select' || renderType=='selectradio')){
            options.forEach(item => {
                if(item.code===value){
                    value = item.name
                }
            });
        }else if(renderType&&(renderType=='inputnumber') && (value || value===0)){
            value = toThousands(value,filedProps && filedProps.precision);
        }else if(renderType&&(renderType=='datepicker') && value) {
            value = ts2Formatter(value);
        }
        return value;
    }

    onChange=(index,dataIndex,value)=>{
        let {itemProps} = this.props;
        this.getValue(value);
        this.props.onChange(index,dataIndex,value,itemProps);
    }

    initialValueRef = (filedProps,record={}) => {
        let {refpk,refname,refcode} = filedProps.reffields;
        //if(!record || record.length == 0 || !filedProps.reffields) return;
        let tempref = {};
        tempref["refpk"] = record[refpk] || "";
        tempref["refname"] = record[refname] || "";
        tempref["refcode"] = record[refcode] || "";
        return JSON.stringify(tempref);
    }

    // calcAliasValue = (record) => {
    //     debugger;
    //     if(!record) return;
    //     let {cascadeparam} = this.props.filedProps;
    //     if(!cascadeparam) return;
    //     let tempobj = {};
    //     cascadeparam.map((item)=>{
    //         tempobj[item.paramkey] = record[item.alias];
    //     })
    //     return tempobj
    // }

    /**
     * 渲染组件函数
     * @returns JSX
     */
    renderComp = () => {
        let { itemProps,renderType, value,index,dataIndex,title,
            textAlign, validate, disabled, btnPageFlag,
            options,required,pattern,patternMessage,status,
            customizeRender,valueField,record,onValidate,
            defaultValue,filedProps,initialValue,...otherProps
        } = this.props;
        let placement = 'left';
        if(textAlign)placement=textAlign=='center'?'bottom':textAlign;
        if(customizeRender){
            return (<div>
                {
                    disabled?
                    <ToolTip overlay={value} inverse placement={placement}>
                        <span className='ac-grid-cell'>{value}</span>
                    </ToolTip>:<RenderCell index={index} renderType='refer' text = {value} textAlign={textAlign}>
                    {
                        React.cloneElement(customizeRender,{
                            valueField:valueField,
                            textAlign:textAlign,
                            field:dataIndex,
                            validate:validate,
                            required:required,
                            value:value,
                            onChange:(field, v)=>{this.props.onChange(index,dataIndex,v,itemProps)},
                            ...filedProps
                        })
                    }
                    </RenderCell>
                }
            </div>)
        }else{
            //特殊处理 主子表的输入框 主表不显示 子表显示
            if(itemProps.childColumn && !record.hasOwnProperty(itemProps.dataIndex)) {
                return "";
            }
            if(itemProps.disableOption){
                let flag;
                for(var item in itemProps.disableOption) {
                    if(item == "btnPageFlag") {
                        flag = itemProps.disableOption[item] != btnPageFlag?true:false;
                    }else if(record[item] != itemProps.disableOption[item]) {
                        flag = true
                    }
                }
                if(!flag) {
                    return <ToolTip overlay={value} inverse placement={placement}>
                            <span className='ac-grid-cell'>{this.getValue(value)}</span>
                        </ToolTip>;
                }
            }

            let specilaIndex;
            switch (renderType) {
                case 'inputnumber':
                    if(itemProps.childColumn) {
                        specilaIndex = record.key;
                    }else {
                        specilaIndex = record.index
                    }
                    return (<div>
                            {
                                disabled?
                                <ToolTip overlay={value} inverse placement={placement}>
                                    <span className='ac-grid-cell'>{this.getValue(value)}</span>
                                </ToolTip>
                                :<RenderCell index={index} itemProps={itemProps} record={record} text = {value}  textAlign={textAlign}>
                                    <NumberField 
                                        textAlign={textAlign}
                                        field={dataIndex} 
                                        validate={validate} 
                                        required={required} 
                                        index={index}
                                        title={title}
                                        value={value} 
                                        filedProps={filedProps}
                                        renderType="inputnumber"
                                        pattern={pattern}
                                        onValidate = {onValidate}
                                        status={status}
                                        patternMessage={patternMessage}
                                        onChange={(v)=>this.props.onChange(v,dataIndex,specilaIndex,itemProps)}
                                        // iconStyle={iconStyle}
                                        // max={max}
                                        // min={min}
                                        // step={step} 
                                        // precision={precision}
                                        {...filedProps}
                                        />
                                </RenderCell>
                            }
                        </div>);
                break;
                case 'input':
                    if(itemProps.childColumn) {
                        specilaIndex = record.key || 0;
                    }else {
                        specilaIndex = record.index
                    }
                    return (<div>
                        {
                            disabled?
                            <ToolTip overlay={value} inverse placement={placement}>
                                <span className='ac-grid-cell'>{this.getValue(value)}</span>
                            </ToolTip>
                            :<RenderCell index={index} itemProps={itemProps} record={record} text = {value} textAlign={textAlign}>
                                <TextField 
                                    textAlign={textAlign}
                                    field={dataIndex}  
                                    validate={validate} 
                                    required={required} 
                                    index={index}
                                    title={title}
                                    value={value} 
                                    pattern={pattern}
                                    onValidate = {onValidate}
                                    status={status}
                                    patternMessage={patternMessage}
                                    onChange={(v)=>this.props.onChange(v,dataIndex,specilaIndex,itemProps)}
                                    {...filedProps}
                                />
                            </RenderCell>
                        }
                    </div>);
                break;
                case 'select':
                    // value = value?value:filedProps.defaultValue;
                    return (<div>
                            {
                                disabled?
                                <ToolTip inverse placement={placement} overlay={this.getValue(value)}>
                                    <span className='ac-grid-cell'>{this.getValue(value)}</span>
                                </ToolTip>
                                :<RenderCell index={index} itemProps={itemProps} record={record} text ={this.getValue(value)} textAlign={textAlign}>
                                    <SelectField 
                                        textAlign={textAlign}
                                        data={filedProps.options||[]}
                                        field={dataIndex}  
                                        title={title}
                                        index={index}
                                        validate={validate} 
                                        required={required} 
                                        value={value} 
                                        onValidate = {onValidate}
                                        status={status}
                                        onChange={(v,data)=>this.props.onChange(v,dataIndex,record.index,itemProps,data)}
                                        {...filedProps}
                                        />
                                </RenderCell>
                            }
                        </div>
                    )
                break;
                case 'selectradio':
                    // value = value?value:filedProps.defaultValue;
                    return (<div>
                            {
                                disabled?
                                <ToolTip inverse placement={placement} overlay={this.getValue(value)}>
                                    <span className='ac-grid-cell'>{this.getValue(value)}</span>
                                </ToolTip>
                                :<RenderCell index={index} itemProps={itemProps} record={record} text ={this.getValue(value)} textAlign={textAlign}>
                                    <SelectField 
                                        textAlign={textAlign}
                                        data={filedProps.options||[]}
                                        field={dataIndex}  
                                        index={index}
                                        validate={validate} 
                                        title={title}
                                        required={required} 
                                        value={value} 
                                        onValidate = {onValidate}
                                        status={status}
                                        onChange={(v,data)=>this.props.onChange(v,dataIndex,record.index,itemProps,data)}
                                        {...filedProps}
                                        />
                                </RenderCell>
                            }
                        </div>
                    )
                break;
                case 'datepicker':
                    return (<div>
                        {
                            disabled?
                            <ToolTip overlay={value} inverse placement={placement}>
                                <span className='ac-grid-cell'>{value}</span>
                            </ToolTip>
                            :<RenderCell index={index} text = {value} itemProps={itemProps} record={record} textAlign={textAlign}>
                                <DateField 
                                    textAlign={textAlign}
                                    field={dataIndex}  
                                    validate={validate} 
                                    required={required} 
                                    title={title}
                                    index={index}
                                    record={record}
                                    value={value} 
                                    pattern={pattern}
                                    onValidate = {onValidate}
                                    status={status}
                                    patternMessage={patternMessage}
                                    onChange={(v)=>this.props.onChange(v,dataIndex,record.index,itemProps)}
                                    {...filedProps}
                                />
                            </RenderCell>
                        }
                    </div>);
                break;
                // case 'rangepicker':
                //     return (<div>
                //         {
                //             disabled?
                //             <ToolTip overlay={value} inverse placement={placement}>
                //                 <span className='ac-grid-cell'>{value}</span>
                //             </ToolTip>
                //             : <RenderCell text = {value} textAlign={textAlign}>
                //                 <RangeField 
                //                     textAlign={textAlign}
                //                     field={dataIndex}  
                //                     validate={validate} 
                //                     required={required} 
                //                     value={value} 
                //                     pattern={pattern}
                //                     patternMessage={patternMessage}
                //                     onChange={()=>this.props.onChange(value,dataIndex,index,itemProps,data)}
                //                     {...filedProps}
                //                     {...otherProps}
                //                 />
                //             </RenderCell>
                //         }
                //     </div>);
                // break;
                
                case 'refcomponent':
                    return (<div>
                        {
                            disabled?
                            <ToolTip overlay={value} inverse placement={placement}>
                                <span className='ac-grid-cell'>{value}</span>
                            </ToolTip>
                            : <ToolTip overlay={value} inverse placement={placement}>
                                <RenderCell index={index} text = {value} itemProps={itemProps} record={record} textAlign={textAlign} customizeRender={true}>
                                    <RefComField
                                            textAlign={textAlign}
                                            field={dataIndex}  
                                            validate={validate} 
                                            required={required} 
                                            initialValue = {this.initialValueRef(filedProps,record)}
                                            onBlur={this.props.onBlur}
                                            value={value}
                                            index={index}
                                            title={title}
                                            record = {record}
                                            pattern={pattern}
                                            patternMessage={patternMessage}
                                            onValidate = {onValidate}
                                            status={status}
                                            onChange={(v,data)=>this.props.onChange(v,dataIndex,record.index,itemProps,data)}
                                            {...filedProps}
                                        />
                                    </RenderCell>
                            </ToolTip>
                            
                        }
                    </div>);
                break;
            }
        }
        
        
    }
    
    render() {
        return (<div>
            {this.renderComp()}
        </div>);
    }
}


RenderColumn.propTypes = propTypes;
RenderColumn.defaultProps = defaultProps;
export default RenderColumn;
